<template>
<!-- 提现 -->
<div class="w750" :class="[!$route.query.bankName?'white-bg':'', themes.theme]">
	<!-- 提现 -->
	<div class="withward" v-if="$route.query.bankName">
		<div class="withward-item">
			<span class="item-tit">提现方式：</span>
			<span class="w-account" v-if="$route.query.bankName=='支付宝'"><img src="../../assets/images/pay-zhi.png" alt="">{{$route.query.bankName}}</span>
			<span class="w-account" v-if="$route.query.bankName=='微信'"><img src="../../assets/images/pay-wei.png" alt="">{{$route.query.bankName}}</span>
			<span class="w-account" v-if="$route.query.bankName=='银行卡'"><img src="../../assets/images/pay-bank.png" alt="">{{$route.query.bankName}}</span>
		</div>
		<div class="withward-item" v-if="$route.query.bankName=='银行卡'">
			<span class="item-tit">收款银行：</span>
			<input type="text" class="w-number" placeholder="请选择开户银行" @click="bankShow" v-model="withdrawalsParams.bankName" readonly>
		</div>
		<div class="withward-item">
			<span class="item-tit">提现账号：</span>
			<input type="text" v-if="$route.query.bankName=='支付宝'" class="w-number" placeholder="请输入支付宝账号" maxlength="50" v-model="withdrawalsParams.bankNo">
			<input type="text" v-if="$route.query.bankName=='微信'" class="w-number" placeholder="请输入微信账号" maxlength="50" v-model="withdrawalsParams.bankNo">
			<input type="text" v-if="$route.query.bankName=='银行卡'" class="w-number" placeholder="请输入银行卡账号"  maxlength="50" v-model="withdrawalsParams.bankNo">
		</div>
		<div class="withward-item">
			<span class="item-tit" v-if="$route.query.bankName=='支付宝'">真实姓名：</span>
			<span class="item-tit" v-if="$route.query.bankName=='微信'">真实姓名：</span>
			<span class="item-tit" v-if="$route.query.bankName=='银行卡'">开户姓名：</span>
			<input type="text" v-if="$route.query.bankName=='支付宝'" class="w-number" placeholder="请输入支付宝账号实名认证的姓名" maxlength="50" v-model="withdrawalsParams.bankUser">
			<input type="text" v-if="$route.query.bankName=='微信'" class="w-number" placeholder="请输入微信账号实名认证的姓名" maxlength="50" v-model="withdrawalsParams.bankUser">
			<input type="text" v-if="$route.query.bankName=='银行卡'" class="w-number" placeholder="请输入开户姓名" maxlength="50" v-model="withdrawalsParams.bankUser">
		</div>
		<div class="withward-item" v-if="$route.query.bankName=='银行卡'">
			<span class="item-tit">银行网点：</span>
			<input type="text" class="w-number" placeholder="请填写开户银行网点(可不填)" maxlength="50" v-model="withdrawalsParams.bankOfDeposit" >
		</div>
		<div class="withward-item">
			<span class="item-tit">提现金额：</span>
			<input type="text" class="w-number" :placeholder="'最大可提现金额：'+maxAmount+'￥'" v-model="withdrawalsParams.amount">
			<!-- <input type="number" class="w-number" :placeholder="'最大可提现金额：'+maxAmount+'￥'"  @keydown="handleInput2" oninput="if(value.length>8)value=value.slice(0,10)" v-model="withdrawalsParams.amount"> -->
			<span class="w-all" @click="allAmount">全部提现</span>
		</div>
		<div class="withward-item">
			<span class="item-tit">验证码：</span>
            <input type="text" class="w-number" placeholder="请输入短信验证码" maxlength="6" v-model="withdrawalsParams.mobileCode">
			<span class="w-code" @click.prevent="getVerifyCode()">{{ countDown == 0 ? '获取验证码' : '重新发送'+(countDown)+'秒'}}</span>
		</div>
		<!-- /提现 -->
		<!-- 银行弹窗 -->
		<van-popup  v-model="showBank" position='bottom' >
			<van-picker show-toolbar :title="'选择开户行'" :columns="columns" @change="onChange" @cancel="onCancel" @confirm="onConfirm"/>
		</van-popup>
		<!-- /银行弹窗 -->
	</div>
	<div class="b-btn" @click="toWithdraw"><span class="btn-r">确认提现</span></div>
	<Noempty :pic="require('../../assets/images/record-empty.png')" :title="'数据错误'" v-if="!$route.query.bankName"/>

</div>
</template>

<script>
import { Picker,Popup } from "vant";
import Noempty from 'components/Noempty/Noempty';
import {mapState} from 'vuex'
import { sendSMSCode } from "api/common/common";//公共服务接口-->发送短信验证码
import {getAvailablePredeposit,withdrawalsSave} from 'api/preDeposit'
export default {
	components: {
	Noempty,
 	} ,
	data () {
		return {
       
			withdrawalsParams:{//withdrawalsSave‘提现’接口请求参数
				bankName:this.$route.query.bankName,//提现方式
				bankNo:'',//提现账号
				bankUser:'',//开户姓名
				amount:'',//提现金额
				bankOfDeposit:'',//开户行，非必填(选择银行卡提现时才请求该参数)
				mobileCode:'',//短信验证码
			},
			maxAmount:'',//可提现最大金额
			withdrawalsData:{},//withdrawalsSave‘提现’接口响应参数
			countDown: 0, // 倒计时
			showBank:false,
			columns: ['中国银行', '农业银行','建设银行','工商银行','交通银行'],
		}
	},
	mounted () {
    let that = this

		getAvailablePredeposit().then(res =>{ //获取可提现金额
			this.withdrawalsParams.bankName = '';//因为传进来时bankName=银行卡，但传到下一个页面的bankName是选择的“中国银行”,所以要先清空该值
			if(res.status==1){
				this.maxAmount=res.result
			}else{
				this.$toast({duration: 1000,message:res.msg})}
			});
	},
	watch: {
		newValue(val, oldVal){
			if(val < 0){
				this.withdrawalsParams.amount = 0;
				this.$toast({duration: 1000,message:'提现金额必须大于0'})
			} else if(val > this.maxAmount){
				this.withdrawalsParams.amount = oldVal;
				this.$toast({duration: 1000,message:'不能大于最大可提现金额'})
			} else if(!/^\d+(\.\d{0,2})?$/.test(val)){
				if(val){
					this.withdrawalsParams.amount = oldVal;
				}
			}
		}
	},
	computed: {
		...mapState(['themes']),
		newValue() {
    　　　　return this.withdrawalsParams.amount
    　　}
	},
	methods: {
		onChange(picker, value, index) {
			this.withdrawalsParams.bankName = value;
		},
		bankShow(){//弹出银行选择
			this.showBank=true
		},
		onCancel() {//关闭弹窗
			this.withdrawalsParams.bankName = '';
			this.showBank = false
		},
	    onConfirm(value, index) {//银行选择确认弹窗
			this.withdrawalsParams.bankName = value;
			this.showBank = false
	    },
		// handleInput2(e) {// @keyup后通过正则过滤小数点后两位,并限制金额大小
		// 	e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
		// 	if(this.withdrawalsParams.amount < 0){
		// 		this.withdrawalsParams.amount = 0;
		// 		Toast({duration: 1000,message:'提现金额必须大于0'})
		// 	}
		// 	else if(this.withdrawalsParams.amount > this.maxAmount){
		// 		this.withdrawalsParams.amount = this.maxAmount;
		// 		Toast({duration: 1000,message:'提现金额不能大于'+this.maxAmount+'￥'})
		// 	}
        // },
		toWithdraw(){
			this.$toast.loading({mask: true,forbidClick: true, message: '提现中...'});//防连续点击
			if(this.$route.query.bankName=='支付宝'){
				this.withdrawalsParams.bankName='支付宝'//因为在mounted()里把该值清空了，所以要在这里再次赋值
				if(!this.withdrawalsParams.bankNo){
					this.$toast({duration: 1000,message:'请输入支付宝账号'});return;
				}else if(!this.withdrawalsParams.bankUser){
					this.$toast({duration: 1000,message:'请输入支付宝账号实名认证的姓名'});return;
				}else if(!this.withdrawalsParams.amount){
					this.$toast({duration: 1000,message:'请输入提现金额'});return;
				}else if(!this.withdrawalsParams.mobileCode){
					this.$toast({duration: 1000,message:'请输入验证码'});return;
				}else{this.gewithdrawal()}
			}else if(this.$route.query.bankName=='微信'){
				this.withdrawalsParams.bankName='微信'//因为在mounted()里把该值清空了，所以要在这里再次赋值
				if(!this.withdrawalsParams.bankNo){
					this.$toast({duration: 1000,message:'请输入微信账号'});return;
				}else if(!this.withdrawalsParams.bankUser){
					this.$toast({duration: 1000,message:'请输入微信账号实名认证的姓名'});return;
				}else if(!this.withdrawalsParams.amount){
					this.$toast({duration: 1000,message:'请输入提现金额'});return;
				}else if(!this.withdrawalsParams.mobileCode){
					this.$toast({duration: 1000,message:'请输入验证码'});return;
				}else{this.gewithdrawal()}
			}else if(this.$route.query.bankName=='银行卡'){
				if(!this.withdrawalsParams.bankName){
					this.$toast({duration: 1000,message:'选择收款银行'});return;
				}else if(!this.withdrawalsParams.bankNo){
					this.$toast({duration: 1000,message:'请输入银行卡账号'});return;
				}else if(!this.withdrawalsParams.bankUser){
					this.$toast({duration: 1000,message:'请输入开户姓名'});return;
				}else if(!this.withdrawalsParams.amount){
					this.$toast({duration: 1000,message:'请输入提现金额'});return;
				}else if(!this.withdrawalsParams.mobileCode){
					this.$toast({duration: 1000,message:'请输入验证码'});return;
				}else{this.gewithdrawal()}
			}else{
				this.$toast({duration: 1000,message:'获取提现方式失败，请联系客服'})}
		},
		allAmount(){
			this.withdrawalsParams.amount=this.maxAmount
		},

		getVerifyCode() {//发送验证码
			if(this.$route.query.bankName=='支付宝'){
				if(!this.withdrawalsParams.bankNo){
					this.$toast({duration: 1000,message:'请输入支付宝账号'});return;
				}else if(!this.withdrawalsParams.bankUser){
					this.$toast({duration: 1000,message:'请输入支付宝账号实名认证的姓名'});return;
				}else if(!this.withdrawalsParams.amount){
					this.$toast({duration: 1000,message:'请输入提现金额'});return;
				}else{
					 if(this.countDown > 0) {
					 }else {this.getSMSCode()}
				}
			}else if(this.$route.query.bankName=='微信'){
				if(!this.withdrawalsParams.bankNo){
					this.$toast({duration: 1000,message:'请输入微信账号'});return;
				}else if(!this.withdrawalsParams.bankUser){
					this.$toast({duration: 1000,message:'请输入微信账号实名认证的姓名'});return;
				}else if(!this.withdrawalsParams.amount){
					this.$toast({duration: 1000,message:'请输入提现金额'});return;
				}else{
					 if(this.countDown > 0) {
					 }else {this.getSMSCode()}
				}
			}else if(this.$route.query.bankName=='银行卡'){
				if(!this.withdrawalsParams.bankName){
					this.$toast({duration: 1000,message:'选择收款银行'});return;
				}else if(!this.withdrawalsParams.bankNo){
					this.$toast({duration: 1000,message:'请输入银行卡账号'});return;
				}else if(!this.withdrawalsParams.bankUser){
					this.$toast({duration: 1000,message:'请输入开户姓名'});return;
				}else if(!this.withdrawalsParams.amount){
					this.$toast({duration: 1000,message:'请输入提现金额'});return;
				}else{
					 if(this.countDown > 0) {
					 }else {this.getSMSCode()}
				}
			}else{
				this.$toast({duration: 1000,message:'获取提现方式失败，请联系客服'})}
		},
		getSMSCode(){//封装到getVerifyCode()里的方法
			let params = {source: "withdraw"};
			sendSMSCode(params).then(res=>{//该接口会自动发送到当前用户的注册手机号，所以不用传手机号码参数过去
				if(res.status==1){
					this.countDown = 60;
					this.intervalId = setInterval(() => {
						this.countDown--;
						if (this.countDown == 0) {
							clearInterval(this.intervalId);
						}
					}, 1000);
				}else{this.$toast({duration: 1000,message:res.msg})}
			})
		},
		gewithdrawal(){//封装到toWithdraw()里的方法
			withdrawalsSave(this.withdrawalsParams).then(res=>{
				if(res.status==1){
					this.$router.push({path:'/preDeposit/withdrawSuccess',query:this.withdrawalsParams})
					this.$toast.clear()//成功后马上清除Toast.loading
				}else{this.$toast({duration: 1000,message:res.msg})}
			},() => {this.$toast({duration: 1000,message:'获取数据失败'})
			})
		}
	},
}
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/pre-deposit.css" scoped></style>